<template>
  <div>
    <el-row class="tac user-nav">
      <el-col :span="12">
        <el-menu
          :default-active="activeIndex"
          :active-text-color="'#67C23A'"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>我的信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="UserInfoClick">
                <i class="el-icon-info"></i>
                基本信息
              </el-menu-item>
              <el-menu-item
                index="1-4"
                v-if="userStore.userinfo.role == 'expert'"
                @click="handleExperInfo"
              >
                <i class="el-icon-info"></i>
                专家信息
              </el-menu-item>
              <el-menu-item
                index="1-2"
                @click="UserAddressClick"
                v-if="
                  !userStore.userinfo.role == 'expert' &&
                  !userStore.userinfo.role == 'admin'
                "
              >
                <i class="el-icon-s-home"></i>
                收货地址
              </el-menu-item>
              <el-menu-item index="1-3" @click="UserPasswordClick">
                <i class="el-icon-s-tools"></i>
                修改密码
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu
            index="2"
            v-if="!userStore.userinfo.role == 'expert' && !userStore.userinfo.role == 'admin'"
          >
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>我的发布</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="PublishedGoodsClick">
                <i class="el-icon-s-shop"></i>
                我的商品
              </el-menu-item>
              <el-menu-item index="2-2" @click="PublishedNeedsClick">
                <i class="el-icon-s-comment"></i>
                我的需求
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-if="!userStore.userinfo.role == 'admin'">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>专家管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="handleExpertQuestion">
                <i class="el-icon-question"></i>
                我的问答
              </el-menu-item>
              <el-menu-item index="4-2" @click="handleExpertAppoint">
                <i class="el-icon-alarm-clock"></i>
                我的预约
              </el-menu-item>
              <!-- 只有专家有该模块权限 -->
              <el-menu-item
                index="4-3"
                v-if="userStore.userinfo.role == 'expert'"
                @click="PublishedKnowledgesClick"
              >
                <i class="el-icon-reading"></i>
                我的知识
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu
            index="3"
            v-if="
              !userStore.userinfo.role == 'admin' &&
              !userStore.userinfo.role == 'expert'
            "
          >
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>我的订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="UserBuyClick">
                <i class="el-icon-s-goods"></i>
                我买的
              </el-menu-item>
              <el-menu-item index="3-2" @click="UserSellClick">
                <i class="el-icon-goods"></i>
                我卖的
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item
            index="3"
            v-if="
              !userStore.userinfo.role == 'expert' && !userStore.userinfo.role == 'admin'
            "
            @click="UserFinance"
          >
            <template slot="title">
              <i class="el-icon-postcard"></i>
              <span>我的融资</span>
            </template>
          </el-menu-item>

          <el-menu-item
            index="5"
            v-if="userStore.userinfo.role == 'admin'"
            @click="UserManageClick"
          >
            <i class="el-icon-s-check"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/stores/user";

const userStore = useUserInfoStore();
// const store = useStore();
const router = useRouter();
// const activeIndex = ref(store.state.userActiveIndex);

// 定义方法
const UserFinance = () => {
  router.push("/home/user/userfinance").catch((err) => err);
};
// ... 其他方法 ...

onMounted(() => {
  // store.commit("updateUserActiveIndex", "1-1");
});
</script>

<style lang="less" scoped>
.user-content {
  width: 1100px;
  margin: 10px auto;
  .user-nav {
    float: left;
    width: 200px;
    margin-right: 20px;
    .el-col {
      width: 200px;
    }
  }
}
</style>